<!DOCTYPE html>
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | 仪表盘</title>
    <!-- 告诉浏览器该页面是自适应布局 -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!--<script src="../../static/js/require.js" th:src="@{/js/require.js}" data-main=""></script>-->
    <!--<script src="../../static/js/main.js" th:src="@{/js/main.js}"></script>-->

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.min.css"
          th:href="@{/plugins/bootstrap/css/bootstrap.min.css}"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../static/plugins/font-awesome/css/font-awesome.min.css"
          th:href="@{/plugins/font-awesome/css/font-awesome.min.css}"/>
    <!-- Ionicons -->
    <link rel="stylesheet" href="../../static/plugins/Ionicons/css/ionicons.min.css"
          th:href="@{/plugins/Ionicons/css/ionicons.min.css}"/>
    <!-- Theme style -->
    <link rel="stylesheet" href="../../static/frame/css/AdminLTE.min.css"
          th:href="@{/frame/css/AdminLTE.min.css}"/>
    <!-- DataTables -->
    <link rel="stylesheet" href="../../static/plugins/datatables.net/media/css/dataTables.bootstrap.min.css"
          th:href="@{/plugins/datatables.net/media/css/dataTables.bootstrap.min.css}">

    <!--FixedColumns-->
    <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/FixedColumns/css/fixedColumns.dataTables.min.css"
          th:href="@{/plugins/datatables.net/extensions/FixedColumns/css/fixedColumns.dataTables.min.css}">
    <!--FixedHeader-->
    <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/FixedHeader/css/fixedHeader.dataTables.css"
          th:href="@{/plugins/datatables.net/extensions/FixedHeader/css/fixedHeader.dataTables.css}">
    <!--ColReorder-->
    <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/ColReorder/css/colReorder.dataTables.css"
          th:href="@{/plugins/datatables.net/extensions/ColReorder/css/colReorder.dataTables.css}">

    <!--https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css-->
    <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/Select/css/select.dataTables.min.css"
          th:href="@{/plugins/datatables.net/extensions/Select/css/select.dataTables.min.css}">
    <!--https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css-->
    <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/Buttons/css/buttons.dataTables.css"
          th:href="@{/plugins/datatables.net/extensions/Buttons/css/buttons.dataTables.css}">

    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="../../static/plugins/iCheck/all.css" th:href="@{/plugins/iCheck/all.css}">
    <!--消息弹框动画样式--->
    <link rel="stylesheet" href="../../static/plugins/bootstrap-notify/animate.css" th:href="@{/plugins/bootstrap-notify/animate.css}">

    <!-- AdminLTE 皮肤。
         从 css/skins 目录下选择一个皮肤，以减少负载，而不是下载所有皮肤。 -->
    <link rel="stylesheet" href="../../static/frame/css/skins/_all-skins.min.css" th:href="@{/frame/css/skins/_all-skins.min.css}"/>
    <!-- Google Font -->
    <link rel="stylesheet" href="../../static/frame/css/font-family.css"
          th:href="@{/frame/css/font-family.css}">

    <link rel="stylesheet" href="../../static/frame/adminlte-wolf.css"
          th:href="@{/frame/adminlte-wolf.css}">

    <style>

        th, td { white-space: nowrap; }
    </style>

</head>
<body class="hold-transition skin-blue sidebar-mini fixed wolf">
<div class="wrapper">

    <header class="main-header" id="main-header">

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top top">
            <!-- Logo -->
            <a href="demo.html" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>A</b>LT</span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>Admin</b>LTE</span>
            </a>

            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">切换导航</span>
            </a>

            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <!-- <form class="navbar-form navbar-left" role="search">
                  <div class="form-group">
                    <input type="text" class="form-control" id="navbar-search-input" placeholder="搜索">
                  </div>
                </form> -->
                <ul class="nav navbar-nav">
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="../../adminlte/adminlte/img/user2-160x160.jpg" class="user-image" alt="用户图像">
                            <span class="hidden-xs">Alexander Pierce</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="../../adminlte/adminlte/img/user2-160x160.jpg" class="img-circle" alt="用户图像">

                                <p>
                                    Alexander Pierce - Web 开发人员
                                    <small>注册于2012年11月</small>
                                </p>
                            </li>
                            <!-- Menu Body -->
                            <li class="user-body">
                                <div class="row">
                                    <div class="col-xs-4 text-center">
                                        <a href="#">关注</a>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <a href="#">销售</a>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <a href="#">好友</a>
                                    </div>
                                </div>
                                <!-- /.row -->
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="#" class="btn btn-default btn-flat">资料</a>
                                </div>
                                <div class="pull-right">
                                    <a href="#" class="btn btn-default btn-flat">退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Control Sidebar Toggle Button -->
                    <li>
                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                    </li>
                </ul>
            </div>
        </nav>

        <nav class="navbar navbar-static-top">
            <div class="collapse navbar-collapse pull-left top-menu" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">链接 <span class="sr-only">（当前）</span></a></li>
                    <li><a href="#">链接</a></li>
                    <li><a href="#">链接</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">操作</a></li>
                            <li><a href="#">另一个操作</a></li>
                            <li><a href="#">其他操作</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分隔链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分隔后的链接</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">分区</li>

                <li class="treeview active menu-open">
                    <a href="#">
                        <i class="fa fa-dashboard"></i> <span>数据集</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i></a></li>
                        <li class="treeview">
                            <a href="#"><i class="fa fa-circle-o"></i> 层级1
                                <span class="pull-right-container">
                                  <i class="fa fa-angle-left pull-right"></i>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="#"><i class="fa fa-circle-o"></i> 层级2</a></li>
                                <li class="treeview">
                                    <a href="#"><i class="fa fa-circle-o"></i> 层级2
                                        <span class="pull-right-container">
                                          <i class="fa fa-angle-left pull-right"></i>
                                        </span>
                                    </a>
                                    <ul class="treeview-menu">
                                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
                    </ul>
                </li>

                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-files-o"></i> <span>多级菜单</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
                        <li class="treeview">
                            <a href="#"><i class="fa fa-circle-o"></i> 层级1
                                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="#"><i class="fa fa-circle-o"></i> 层级2</a></li>
                                <li class="treeview">
                                    <a href="#"><i class="fa fa-circle-o"></i> 层级2
                                        <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                                    </a>
                                    <ul class="treeview-menu">
                                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-share"></i> <span>多级菜单</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
                        <li class="treeview">
                            <a href="#"><i class="fa fa-circle-o"></i> 层级1
                                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="#"><i class="fa fa-circle-o"></i> 层级2</a></li>
                                <li class="treeview">
                                    <a href="#"><i class="fa fa-circle-o"></i> 层级2
                                        <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                                    </a>
                                    <ul class="treeview-menu">
                                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-book"></i> <span>单独菜单</span></a></li>
                <li class="header">分区</li>
                <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>重要</span></a></li>
                <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>警告</span></a></li>
                <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>信息</span></a></li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (页眉) -->
        <section class="content-header">
            <h1>主标题
                <small>小标题</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li>一级菜单</li>
                <li>二级菜单</li>
                <li class="active">当前菜单</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Info boxes -->
            <div class="row">

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">CPU 使用</span>
                            <span class="info-box-number">90<small>%</small></span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">喜欢</span>
                            <span class="info-box-number">41,410</span>
                        </div>
                    </div>
                </div>
                <!-- fix for small devices only -->
                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">销售</span>
                            <span class="info-box-number">760</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">新会员</span>
                            <span class="info-box-number">2,000</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="box box-info form-horizontal">
                    <div class="box-body">
                        <div class="form-group col-sm-6">
                            <label for="selectCatalog" class="col-sm-4 control-label">树形菜单:</label>

                            <div class="col-sm-8">
                                <input type="text" class="form-control"  name="selectCatalog" id="selectCatalog"
                                       placeholder="树形控件" data-val_required="required"/>
                                <div id="tree"></div>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="notify" class="col-sm-4 control-label">名称：</label>

                            <div class="col-sm-8">

                                <button type="button" class="btn btn-default" id="notify">
                                    默认样式弹框 <!--bs-example-modal-lg  modal-lg  设置模态框变大 -->
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div class="box">-->
                <!--<div class="form-group">-->
                <!--<label class="col-lg-2 col-md-2 control-label">上级目录</label>-->
                <!--<input id="selectCatalog"  name="selectCatalog" type="text" autocomplete="off" class="col-lg-10 col-md-2 form-group"-->
                <!--onclick="$('#tree').show()" style="width: 250px;height: 31px;margin-left: 10px; margin-bottom:0px" tabindex="2">-->
                <!--<div id="tree" style="display: none; position:absolute; z-index:1010; background-color:white; margin-left:195px; width: 250px"></div>-->
                <!--</div>-->
                <!--</div>-->
            </div>


            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">悬停数据表-example2</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-info">选择</button>
                                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#" id="demo_select_all">全选</a></li>
                                    <li><a href="#" id="demo_select_none">全不选</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info">导出</button>
                                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                    <span class="sr-only">切换下拉菜单</span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#" id="demo_export_pdf">导出PDF</a></li>
                                    <li><a href="#" id="demo_export_csv">导出CSV</a></li>
                                    <li><a href="#" id="demo_export_excel">导出EXCEL</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#" id="demo_export_print">打印</a></li>
                                </ul>
                            </div>
                            <table id="example2" class="table table-bordered table-hover"></table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->

                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">数据表全功能-example1</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>渲染引擎</th>
                                    <th>浏览器</th>
                                    <th>平台</th>
                                    <th>引擎版本</th>
                                    <th>CSS 等级</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>Trident</td>
                                    <td>Internet
                                        Explorer 4.0
                                    </td>
                                    <td>Win 95+</td>
                                    <td> 4</td>
                                    <td>X</td>
                                </tr>
                                <tr>
                                    <td>Trident</td>
                                    <td>Internet
                                        Explorer 5.0
                                    </td>
                                    <td>Win 95+</td>
                                    <td>5</td>
                                    <td>C</td>
                                </tr>
                                <tr>
                                    <td>Trident</td>
                                    <td>Internet
                                        Explorer 5.5
                                    </td>
                                    <td>Win 95+</td>
                                    <td>5.5</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Trident</td>
                                    <td>Internet
                                        Explorer 6
                                    </td>
                                    <td>Win 98+</td>
                                    <td>6</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Trident</td>
                                    <td>Internet Explorer 7</td>
                                    <td>Win XP SP2+</td>
                                    <td>7</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Trident</td>
                                    <td>AOL browser (AOL desktop)</td>
                                    <td>Win XP</td>
                                    <td>6</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Firefox 1.0</td>
                                    <td>Win 98+ / OSX.2+</td>
                                    <td>1.7</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Firefox 1.5</td>
                                    <td>Win 98+ / OSX.2+</td>
                                    <td>1.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Firefox 2.0</td>
                                    <td>Win 98+ / OSX.2+</td>
                                    <td>1.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Firefox 3.0</td>
                                    <td>Win 2k+ / OSX.3+</td>
                                    <td>1.9</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Camino 1.0</td>
                                    <td>OSX.2+</td>
                                    <td>1.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Camino 1.5</td>
                                    <td>OSX.3+</td>
                                    <td>1.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Netscape 7.2</td>
                                    <td>Win 95+ / Mac OS 8.6-9.2</td>
                                    <td>1.7</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Netscape Browser 8</td>
                                    <td>Win 98SE+</td>
                                    <td>1.7</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Netscape Navigator 9</td>
                                    <td>Win 98+ / OSX.2+</td>
                                    <td>1.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.0</td>
                                    <td>Win 95+ / OSX.1+</td>
                                    <td>1</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.1</td>
                                    <td>Win 95+ / OSX.1+</td>
                                    <td>1.1</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.2</td>
                                    <td>Win 95+ / OSX.1+</td>
                                    <td>1.2</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.3</td>
                                    <td>Win 95+ / OSX.1+</td>
                                    <td>1.3</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.4</td>
                                    <td>Win 95+ / OSX.1+</td>
                                    <td>1.4</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.5</td>
                                    <td>Win 95+ / OSX.1+</td>
                                    <td>1.5</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.6</td>
                                    <td>Win 95+ / OSX.1+</td>
                                    <td>1.6</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.7</td>
                                    <td>Win 98+ / OSX.1+</td>
                                    <td>1.7</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Mozilla 1.8</td>
                                    <td>Win 98+ / OSX.1+</td>
                                    <td>1.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Seamonkey 1.1</td>
                                    <td>Win 98+ / OSX.2+</td>
                                    <td>1.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Gecko</td>
                                    <td>Epiphany 2.20</td>
                                    <td>Gnome</td>
                                    <td>1.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Webkit</td>
                                    <td>Safari 1.2</td>
                                    <td>OSX.3</td>
                                    <td>125.5</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Webkit</td>
                                    <td>Safari 1.3</td>
                                    <td>OSX.3</td>
                                    <td>312.8</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Webkit</td>
                                    <td>Safari 2.0</td>
                                    <td>OSX.4+</td>
                                    <td>419.3</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Webkit</td>
                                    <td>Safari 3.0</td>
                                    <td>OSX.4+</td>
                                    <td>522.1</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Webkit</td>
                                    <td>OmniWeb 5.5</td>
                                    <td>OSX.4+</td>
                                    <td>420</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Webkit</td>
                                    <td>iPod Touch / iPhone</td>
                                    <td>iPod</td>
                                    <td>420.1</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Webkit</td>
                                    <td>S60</td>
                                    <td>S60</td>
                                    <td>413</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Opera 7.0</td>
                                    <td>Win 95+ / OSX.1+</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Opera 7.5</td>
                                    <td>Win 95+ / OSX.2+</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Opera 8.0</td>
                                    <td>Win 95+ / OSX.2+</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Opera 8.5</td>
                                    <td>Win 95+ / OSX.2+</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Opera 9.0</td>
                                    <td>Win 95+ / OSX.3+</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Opera 9.2</td>
                                    <td>Win 88+ / OSX.3+</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Opera 9.5</td>
                                    <td>Win 88+ / OSX.3+</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Opera for Wii</td>
                                    <td>Wii</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Nokia N800</td>
                                    <td>N800</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Presto</td>
                                    <td>Nintendo DS browser</td>
                                    <td>Nintendo DS</td>
                                    <td>8.5</td>
                                    <td>C/A<sup>1</sup></td>
                                </tr>
                                <tr>
                                    <td>KHTML</td>
                                    <td>Konqureror 3.1</td>
                                    <td>KDE 3.1</td>
                                    <td>3.1</td>
                                    <td>C</td>
                                </tr>
                                <tr>
                                    <td>KHTML</td>
                                    <td>Konqureror 3.3</td>
                                    <td>KDE 3.3</td>
                                    <td>3.3</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>KHTML</td>
                                    <td>Konqureror 3.5</td>
                                    <td>KDE 3.5</td>
                                    <td>3.5</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Tasman</td>
                                    <td>Internet Explorer 4.5</td>
                                    <td>Mac OS 8-9</td>
                                    <td>-</td>
                                    <td>X</td>
                                </tr>
                                <tr>
                                    <td>Tasman</td>
                                    <td>Internet Explorer 5.1</td>
                                    <td>Mac OS 7.6-9</td>
                                    <td>1</td>
                                    <td>C</td>
                                </tr>
                                <tr>
                                    <td>Tasman</td>
                                    <td>Internet Explorer 5.2</td>
                                    <td>Mac OS 8-X</td>
                                    <td>1</td>
                                    <td>C</td>
                                </tr>
                                <tr>
                                    <td>Misc</td>
                                    <td>NetFront 3.1</td>
                                    <td>Embedded devices</td>
                                    <td>-</td>
                                    <td>C</td>
                                </tr>
                                <tr>
                                    <td>Misc</td>
                                    <td>NetFront 3.4</td>
                                    <td>Embedded devices</td>
                                    <td>-</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Misc</td>
                                    <td>Dillo 0.8</td>
                                    <td>Embedded devices</td>
                                    <td>-</td>
                                    <td>X</td>
                                </tr>
                                <tr>
                                    <td>Misc</td>
                                    <td>Links</td>
                                    <td>Text only</td>
                                    <td>-</td>
                                    <td>X</td>
                                </tr>
                                <tr>
                                    <td>Misc</td>
                                    <td>Lynx</td>
                                    <td>Text only</td>
                                    <td>-</td>
                                    <td>X</td>
                                </tr>
                                <tr>
                                    <td>Misc</td>
                                    <td>IE Mobile</td>
                                    <td>Windows Mobile 6</td>
                                    <td>-</td>
                                    <td>C</td>
                                </tr>
                                <tr>
                                    <td>Misc</td>
                                    <td>PSP browser</td>
                                    <td>PSP</td>
                                    <td>-</td>
                                    <td>C</td>
                                </tr>
                                <tr>
                                    <td>Other browsers</td>
                                    <td>All others</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>U</td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <th>渲染引擎</th>
                                    <th>浏览器</th>
                                    <th>平台</th>
                                    <th>引擎版本</th>
                                    <th>CSS 等级</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">
                默认样式弹框 <!--bs-example-modal-lg  modal-lg  设置模态框变大 -->
            </button>
            <div class="modal fade bs-example-modal-lg" id="modal-default">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="test-rowIndex">默认弹框</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <input type="hidden" value="" id="dt_row_index"/>
                                <div class="col-xs-2" id="show_previous_data">上一条</div>
                                <div class="col-xs-8">

                                    <div class="form-group col-sm-6">
                                        <label for="value1" class="col-sm-4 control-label">渲染引擎:</label>

                                        <div class="col-sm-8">
                                            <input type="text" class="form-control"  name="value1" id="value1" readonly="readonly"/>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="value2" class="col-sm-4 control-label">浏览器：</label>

                                        <div class="col-sm-8">
                                            <input type="text" class="form-control"  name="value1" id="value2" readonly="readonly"/>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="value3" class="col-sm-4 control-label">平台:</label>

                                        <div class="col-sm-8">
                                            <input type="text" class="form-control"  name="value1" id="value3" readonly="readonly"/>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="value4" class="col-sm-4 control-label">CSS等级:</label>

                                        <div class="col-sm-8">
                                            <input type="text" class="form-control"  name="value1" id="value4" readonly="readonly"/>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-xs-2" id="show_next_data">下一条</div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary">保存修改</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.4.0
        </div>
        <strong>Copyright &copy; 2014-2019 <a href="#">GTD</a>.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">近期活动</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-birthday-cake bg-red"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Langdon's 生日</h4>

                                <p>23岁生日，在4月24日</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-user bg-yellow"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Frodo 更新了个人资料</h4>

                                <p>新电话 +1(800)555-1234</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Nora 加入邮件列表</h4>

                                <p>nora@example.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-file-code-o bg-green"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">254 计划任务执行</h4>

                                <p>执行时间5秒</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">任务进度</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                自定义模板设计
                                <span class="label label-danger pull-right">70%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                更新简历
                                <span class="label label-success pull-right">95%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Laravel积分
                                <span class="label label-warning pull-right">50%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                后端框架
                                <span class="label label-primary pull-right">68%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->

            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">常规设置</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            报告面板使用
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            有关此常规设置选项信息
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            允许邮件重定向
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            其他选项是可用的
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            在帖子中显示作者姓名
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            允许用户在博客帖子中显示自己的名字
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <h3 class="control-sidebar-heading">聊天设置</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            显示我在线
                            <input type="checkbox" class="pull-right" checked>
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            关闭通知
                            <input type="checkbox" class="pull-right">
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            删除聊天记录
                            <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
                        </label>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <!-- /.control-sidebar -->
    <!-- 添加侧边栏的背景。
         这个 div必须放在 control-sidebar 之后 -->
    <div class="control-sidebar-bg"></div>

</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="../../static/plugins/jquery/jquery-1.10.2.js"
        th:src="@{/plugins/jquery/jquery-1.10.2.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../static/plugins/bootstrap/js/bootstrap.min.js"
        th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- FastClick -->
<script src="../../static/plugins/fastclick/lib/fastclick.js"
        th:src="@{/plugins/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script src="../../static/frame/js/adminlte.js"
        th:src="@{/frame/js/adminlte.js}"></script>
<!-- adminlte for demo purposes -->
<script src="../../static/frame/adminlte-wolf.js"
        th:src="@{/frame/adminlte-wolf.js}"></script>
<script src="../../static/frame/wolf.js"
        th:src="@{/frame/wolf.js}"></script>
<!-- DataTables -->
<script src="../../static/plugins/datatables.net/media/js/jquery.dataTables.js"
        th:src="@{/plugins/datatables.net/media/js/jquery.dataTables.js}"></script>
<!-- DataTables -->
<script src="../../static/plugins/datatables.net/media/js/dataTables.bootstrap.js"
        th:src="@{/plugins/datatables.net/media/js/dataTables.bootstrap.js}"></script>

<!--冻结列-->
<script src="../../static/plugins/datatables.net/extensions/FixedColumns/js/dataTables.fixedColumns.min.js"
        th:src="@{/plugins/datatables.net/extensions/FixedColumns/js/dataTables.fixedColumns.min.js}"></script>
<!--冻结表头-->
<script src="../../static/plugins/datatables.net/extensions/FixedHeader/js/dataTables.fixedHeader.js"
        th:src="@{/plugins/datatables.net/extensions/FixedHeader/js/dataTables.fixedHeader.js}"></script>
<!--拖动设置列宽-->
<script src="../../static/plugins/datatables.net/extensions/colresizable/colResizable-1.6.js"
        th:src="@{/plugins/datatables.net/extensions/colresizable/colResizable-1.6.js}"></script>
<!--交换列-->
<script src="../../static/plugins/datatables.net/extensions/ColReorder/js/dataTables.colReorder.js"
        th:src="@{/plugins/datatables.net/extensions/ColReorder/js/dataTables.colReorder.js}"></script>

<!-- iCheck 1.0.1 -->
<script src="../../static/plugins/iCheck/icheck.min.js" th:src="@{/plugins/iCheck/icheck.min.js}"></script>

<!--select-->
<script src="../../static/plugins/datatables.net/extensions/Select/js/dataTables.select.min.js"
        th:src="@{/plugins/datatables.net/extensions/Select/js/dataTables.select.min.js}"></script>

<!---导出依赖-->
<script type="text/javascript" src="../../static/plugins/JSZip-2.5.0/jszip.js" th:src="@{/plugins/JSZip-2.5.0/jszip.js}"></script>
<script type="text/javascript" src="../../static/plugins/pdfmake-0.1.36/pdfmake.js" th:src="@{/plugins/pdfmake-0.1.36/pdfmake.js}"></script>
<script type="text/javascript" src="../../static/plugins/pdfmake-0.1.36/vfs_fonts.js" th:src="@{/plugins/pdfmake-0.1.36/vfs_fonts.js}"></script>

<!--按钮依赖-->
<script type="text/javascript" src="../../static/plugins/datatables.net/extensions/Buttons/js/dataTables.buttons.js"
        th:src="@{/plugins/datatables.net/extensions/Buttons/js/dataTables.buttons.js}"></script>
<script type="text/javascript" src="../../static/plugins/datatables.net/extensions/Buttons/js/buttons.flash.js"
        th:src="@{/plugins/datatables.net/extensions/Buttons/js/buttons.flash.js}"></script>
<script type="text/javascript" src="../../static/plugins/datatables.net/extensions/Buttons/js/buttons.html5.js"
        th:src="@{/plugins/datatables.net/extensions/Buttons/js/buttons.html5.js}"></script>
<script type="text/javascript" src="../../static/plugins/datatables.net/extensions/Buttons/js/buttons.print.js"
        th:src="@{/plugins/datatables.net/extensions/Buttons/js/buttons.print.js}"></script>

<!--树形控件-->
<script type="text/javascript" src="../../static/plugins/bootstrap-treeview/bootstrap-treeview.min.js"
        th:src="@{/plugins/bootstrap-treeview/bootstrap-treeview.min.js}"></script>

<!--弹框控件-->
<script type="text/javascript" src="../../static/plugins/bootstrap-notify/bootstrap-notify.min.js"
        th:src="@{/plugins/bootstrap-notify/bootstrap-notify.min.js}"></script>

<script>

    $(function () {
        $('#example1').DataTable({
            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "paginate": {//分页的样式文本内容。
                    "previous": "上一页",
                    "next": "下一页",
                    "first": "第一页",
                    "last": "最后一页"
                }
            },
            "pageLength": 5,//首次加载的数据条数
            'paging'      : true,
            'lengthChange': false,
            'searching'   : false,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false,//自动宽度
            //导出-打印

            dom: 'Bfrtip',
            buttons: [
                'csv', 'excel', 'pdf', 'print',
                'selected',
                'selectedSingle',
                'selectAll',
                'selectNone',
                'selectRows',
                'selectColumns',
                'selectCells'
            ],
            select: true
        });

        var dataSet = [
            ['Trident4','Internet Explorer 4','Win 95+','4','1','2','3','4','5','6','7','8','9','1'],
            ['Trident5','Internet Explorer 5','Win 95+','5','C','C','C','X','X','X','X','X','X','2'],
            ['Trident6','Internet Explorer 6','Win 95+','5.5','A','A','A','X','X','X','X','X','X','3'],
            ['Trident7','Internet Explorer 7','Win 98+','6','A','A','A','X','X','X','X','X','X','4'],
            ['Trident8','Internet Explorer 8','Win XP SP2+','7','A','A','A','X','X','X','X','X','X','5'],
            ['Trident9','AOL browser (AOL desktop)','Win XP','6','A','A','A','X','X','X','X','X','X','6'],
            ['Gecko1','Firefox 1.0','Win 98+ / OSX.2+','1.7','A','A','A','X','X','X','X','X','X','7'],
            ['Gecko1.5','Firefox 1.5','Win 98+ / OSX.2+','1.8','A','A','A','X','X','X','X','X','X','8'],
            ['Gecko2','Firefox 2.0','Win 98+ / OSX.2+','1.8','A','A','A','X','X','X','X','X','X','9'],
            ['Gecko3','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A','A','A','X','X','X','X','X','X','10'],
            ['Gecko4','Camino 1.0','OSX.2+','1.8','A','A','A','X','X','X','X','X','X','11'],
            ['Gecko5','Camino 1.5','OSX.3+','1.8','A','A','A','X','X','X','X','X','X','12'],
        ];

        var example2 = $('#example2').DataTable({
            "data": dataSet,
            "columns": [
                {
                    "title": "渲染引擎" ,
                    "className": "td_cell_center",
                    "action":function () {
                        this.columns([1, 2]).select();
                    }
                },
                { "title": "浏览器" ,"className": "td_cell_center"},
                { "title": "平台" ,"className": "td_cell_center"},
                { "title": "引擎版本", "className": "td_cell_center", /*"visible": false*/},
                { "title": "CSS 等级1", "className": "td_cell_center" },
                { "title": "CSS 等级2", "className": "td_cell_center" },
                { "title": "CSS 等级3", "className": "td_cell_center" },
                { "title": "CSS 等级1", "className": "td_cell_center" },
                { "title": "CSS 等级2", "className": "td_cell_center" },
                { "title": "CSS 等级3", "className": "td_cell_center" },
                { "title": "CSS 等级1", "className": "td_cell_center" },
                { "title": "CSS 等级2", "className": "td_cell_center" },
                { "title": "CSS 等级3", "className": "td_cell_center" },
                {
                    "title": "操作",
                    "class": "center",
                    "render": function(data, type, row) {
                        return "<button type='button' class='btn btn-block btn-danger' value='"+data+"'>删除</button>";
                    }
                }
            ],
            //语言国际化
            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "paginate": {//分页的样式文本内容。
                    "previous": "上一页",
                    "next": "下一页",
                    "first": "第一页",
                    "last": "最后一页"
                }
            },
            //自定义控件摆放的位置
            "dom": "<'row'<'col-sm-12'fB>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-3'l><'col-sm-3'i><'col-sm-6'p>>",
            //导出功能按钮位置样式改变
            "buttons": [
                {
                    "extend": "pdf",
                    "text": "导出PDF",
                    "className": "btn_export_pdf", //按钮的class样式
                    "exportOptions": {
                        "modifier": {
                            "page": "current"
                        }
                    }
                },
                {
                    "extend": "csv",
                    "text": "导出csv",
                    "className": "btn_export_csv", //按钮的class样式
                    "exportOptions": {
                        "modifier": {
                            "page": "current"
                        }
                    }
                },
                {
                    "extend": "excel",
                    "text": "导出excel",
                    "className": "btn_export_excel", //按钮的class样式
                    "exportOptions": {
                        "modifier": {
                            "page": 'current'
                        }
                    }
                },
                {
                    "extend": "print",
                    "text": '打印',
                    "className": "btn_export_print", //按钮的class样式
                    "exportOptions": {
                        "modifier": {
                            "page": "current"
                        }
                    }
                }
            ],
            select: true,//是否选中一行
            scrollX: true,
            bScrollCollapse: false,
            fixedColumns:   {//锁定列
                leftColumns: 2
            },
            fixedHeader: {
                headerOffset: $('#main-header').outerHeight()//锁定表头
            },
            colReorder: true,//列位置调整
            "bSort": false
        });

        $("#example2").colResizable();//列宽调整
        $("#example1").colResizable();//列宽调整

        //全选
        $("#demo_select_all").on("click",function(){
            example2.rows().select();
        });
        //全不选
        $("#demo_select_none").on("click",function (){
            example2.rows().deselect();
        });
        //导出pdf
        $("#demo_export_pdf").on("click",function(){
            $(".btn_export_pdf").trigger("click");
        });
        //导出csv
        $("#demo_export_csv").on("click",function(){
            $(".btn_export_csv").trigger("click");
        });
        //导出 excel
        $("#demo_export_excel").on("click",function(){
            $(".btn_export_excel").trigger("click");
        });
        //打印
        $("#demo_export_print").on("click",function(){
            $(".btn_export_print").trigger("click");
        });
        //选中一列数据
        $('#example2 thead tr').on('click',"th", function () {
            var obj = $(this);
            example2.columns().deselect();
            example2.columns($(this)).select();
        });
        //取消选中一列数据
        $('#example2 thead tr').on('dblclick',"th", function () {
            example2.columns().deselect();
        });


        // example2.buttons().container().appendTo( $('#btn-oper') );
        // $('#example2 tbody tr').attr("data-target","#modal-default");
        //$('#example2 tbody tr').attr({"data-toggle":"modal","data-target":"#modal-default"});

        //双击打开模态详情框
        $('#example2 tbody tr').on('dblclick', 'td:gt(0)', function () {
            var tr = $(this).closest('tr');
            var row = example2.row(tr);
            //然后根据元素取出行号
            //var rowIndex = $('#btnEdit').attr('data-rowindex');
            //最后获取数据
            //$('#example').DataTable().rows(rowIndex).data()[0];
            console.info("row-index:"+row.index());
            show(row.data(),row.index());
        });

        //模态框上一条数据
        $("#show_previous_data").on("click",function(){
            var row_index = $("#dt_row_index").val();
            if(row_index == 0){
                alert("已经是第一条数据了");
                return false;
            }
            var data = $("#example2").DataTable().rows(row_index-1).data()[0];

            var value_arr = ["value1","value2","value3","value4"];
            for(var i = 0;i<value_arr.length;i++){
                $("#"+value_arr[i]).val(data[i]);
            }
            $("#dt_row_index").val(row_index-1);

        });
        //模态框下一条数据
        $("#show_next_data").on("click",function(){
            var row_index = $("#dt_row_index").val();
            //要判断是否为最后一条数据
            var totalSize = example2.data().length;
            if(row_index == (totalSize-1) ){
                alert("已经是最后一条数据了");
                return false;
            }
            var data = $("#example2").DataTable().rows(Number(row_index)+Number(1),{order:'current'}).data()[0];

            var value_arr = ["value1","value2","value3","value4"];
            for(var i = 0;i<value_arr.length;i++){
                $("#"+value_arr[i]).val(data[i]);
            }
            $("#dt_row_index").val(Number(row_index)+Number(1));
        });
        //////////////////树形控件/////////树形控件////////////////
        var defaultData = [
            {
                text: '地区',
                href: '#',
                tags: ['4'],
                nodes: [
                    {
                        text: '湖北省',
                        href: '#',
                        tags: ['2'],
                        nodes: [
                            {
                                text: '武汉市',
                                href: '#',
                                tags: ['0']
                            },
                            {
                                text: '天门市',
                                href: '#',
                                tags: ['0']
                            }
                        ]
                    },
                    {
                        text: '广东省',
                        href: '#',
                        tags: ['0'],
                        nodes: [
                            {
                                text: '广州市',
                                href: '#',
                                tags: ['0']
                            },
                            {
                                text: '深圳市',
                                href: '#',
                                tags: ['0']
                            },
                            {
                                text: '惠州市',
                                href: '#',
                                tags: ['0']
                            }
                        ]
                    },
                    {
                        text: '北京市',
                        href: '#',
                        tags: ['0']
                    }
                ]
            },
            {
                text: '人口',
                href: '#',
                tags: ['0'],
                nodes:[
                    {
                        text: '1000万',
                        href: '#',
                        tags: ['0']
                    },
                    {
                        text: '100万',
                        href: '#',
                        tags: ['0']
                    },
                    {
                        text: '10万',
                        href: '#',
                        tags: ['0']
                    }
                ]
            }
        ];
        //树形控件
        $('#demo_tree_view').treeview({
            data:defaultData,
            color: "#428bca",
            //backColor: "black",背景色
            //borderColor:'green',
            collapseIcon: "glyphicon glyphicon-minus",//可收缩的节点图标
            nodeIcon: "glyphicon glyphicon-user",
            //emptyIcon: "glyphicon glyphicon-ban-circle",//设置列表树中没有子节点的节点的图标
            expandIcon: "glyphicon glyphicon-plus",  //设置列表上中有子节点的图标
            highlightSearchResults:true,//是否高亮搜索结果 默认true
            highlightSelected:true,     //是否选中高亮显示
            onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
            levels: 0 ,                 //设置初始化展开几级菜单 默认为2
            selectedIcon: 'glyphicon glyphicon-tint',
            // selectedBackColor: 'black',  //设置被选中的节点背景颜色
            //selectedColor : 'red',      //设置被选择节点的字体、图标颜色
            showBorder:true,                //是否显示边框
            showCheckbox:true,              //是否显示多选框
            //uncheckedIcon:'',             //设置未选择节点的图标
            showTags:false,//显示徽章
        });
        $("#selectCatalog").click(function() {
            $("#tree").show();
            var options = {
                levels: 1,
                data: defaultData,
                showCheckbox:true,
                onNodeSelected: function (event, data) {
                    $("#selectCatalog").val(data.text);
                    $("#tree").hide();//选中树节点后隐藏树
                }
            };
            $('#tree').treeview(options);
        });
        //弹出提示框
        $("#notify").click(function(){
            $.notify({
                // options
                icon: 'glyphicon glyphicon-remove-sign',  //glyphicon glyphicon-info-sign  warning (!)  info(i) ok(√) remove（X）
                title: '错误:',
                message: 'Hello World',
                url: 'https://github.com/mouse0270/bootstrap-notify',
                target: '_blank'
            },{
                // settings
                type: "danger",//弹框类型 info \ danger \ success \ warning
                url_target: '_blank',//地址
                placement: {//显示位置
                    from: "bottom",
                    align: "right"
                },
                animate: {//动画效果
                    enter: 'animated fadeInDown',
                    exit: 'animated fadeOutUp'
                }
            });
        });

    });

    function _data_format(d) {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
            '<td>KEY:</td>'
        '</tr>'+
        '</table>';
    }
    //弹出模态框
    function show(data,rowIndex){
        $("#modal-default").show();  //点击模态窗口遮罩层会关闭模态窗口的bug
        $('#modal-default').modal({
            backdrop: 'static',
            show: false
        });
        $("#rowIndex").val(rowIndex);
        var value = ["value1","value2","value3","value4"];
        for(var i = 0;i<value.length;i++){
            $("#"+value[i]).val(data[i]);
        }
        $("#dt_row_index").val(rowIndex);
        $("#test-rowIndex").text("默认弹框 =="+rowIndex+"==");
        $("#modal-default").modal("show");
    }
    //模态框上一条数据
    function previous(rowIndex){

        var data = $("#example2").DataTable().row(rowIndex).data();
        console.info("dta="+data);

        var value_arr = ["value1","value2","value3","value4"];
        for(var i = 0;i<value_arr.length;i++){
            $("#"+value_arr[i]).val(data[i]);
        }

    }
    //模态框上一条数据
    function next(rowIndex) {colResizable

        var data = $("#example2").DataTable().row(rowIndex).data();
        console.info("dta="+data);

        var value = ["value1","value2","value3","value4"];
        for(var i = 0;i<value.length;i++){
            $("#"+value[i]).val(data[i]);
        }

    }


</script>
</body>
</html>
